<template>
  <footer class="footer">
    <span class="todo-count">
      <strong>{{ leftCount }}</strong> item left
    </span>
    <ul class="filters">
      <li v-for="item in arr" :key="item" @click="emit('changeActive', item)">
        <a :class="{selected: props.active === item}" href="#/">{{ item }}</a>
      </li>
    </ul>
    <button class="clear-completed" @click="emit('clearCompleted')">Clear completed</button>
  </footer>
</template>

<script setup >
import { computed } from 'vue';

  const arr = ['All', 'Active', 'Completed']
  const props = defineProps({
    list: {
      type: Array,
      default: ()=> []
    },
    active: String
  })
  const emit = defineEmits(['clearCompleted', 'changeActive'])


  const leftCount = computed(()=> {
    return props.list.filter((item) => !item.done).length
  })
</script>

<style scoped>

</style>